浅谈 requestAnimationFrame 请求动画帧

浅谈 requestAnimationFrame 请求动画帧

JavaScript 中有 setTimeout 和 setInterval 两种定时器,但这两种定时器虽然设定了精确的时间,但 JS 却不能保证恰好在那个时间点运行.一是因为大多数浏览器并没有精确到毫秒级别的触发时间,多少会有时间差,二是因为JS 的运行机制是 EventLoop 无法保证时间精确.

requestAnimationFrame

requestAnimationFrame是一种时间精确的定时器,原理是由系统决定回调函数的执行时间,而执行频率紧紧跟随浏览器的刷新频率.如果刷新频率通常为60HZ,即一秒钟重绘60次,那么requestAnimationFrame也会执行60次.即使什么都不做,显示器依然会以相应频率不断刷新屏幕上的图像.

setTimeout 和 setInterval 实现的动画在某些设备上会有卡顿,抖动的效果.这是因为刷新频率与设置的时间间隔不同步导致的.而动画的本质就是让人眼看到的图像被绘制而引起变化的视觉效果,这个变化要以连贯平滑的方式进行过渡.

requestAnimationFrame的调用

1
2
3
4
5
6
7
8
9
let progress = 0
function render(){
  progress += 1 //修改图像位置
  if(progress < 100){
    // 递归渲染
    window.requestAnimationFrame(render)
  }
}
window.requestAnimationFrame(render) // 第一帧渲染